<template>
	<div>
		<div class="occupy" @click="handleDetalis(listData.system_id)">
			<img src="../../assets/images/home-horn.png" alt="" />
			<span></span>
			<p>{{listData.system_title}}</p>
		</div>
	</div>
</template>

<script>
	import axios from "axios";
	import user from '@/utils/isLogin';
	
	export default{
		data(){
			return{
				listData:{},
				isClick:true
			}
		},
		components:{
			
		},
		created(){
			axios({
			   method: 'post',
			   url: user.src + '/index/system/system_list',
			})
			.then((res) => {
				if(res.data.status == 200){
					this.listData = res.data.data[0];
				}
			})
			.catch((error)=> {
			    console.log(error);
			});
			let plusReady = ()=>{
				
			};
			if(window.plus){
				plusReady();
			}else{
				document.addEventListener("plusready", plusReady, false);
			}
		},
		methods:{
			handleDetalis(id){
				if(this.isClick){
					this.isClick = false;
					var messdetails = plus.webview.create('messdetails.html','messdetails',{scrollIndicator:'none'},{
						systemId:id
					});
					messdetails.addEventListener("loaded", ()=> {
					   messdetails.show('pop-in', 300);
					   this.isClick = true;
					   messdetails = null;
					}, false);
				}
			}
		}
	}
</script>

<style lang="less">
	.occupy{

		height: 120px;
		border-bottom: 0.3rem solid #ebebeb;
		padding: 0 40px 0px 21px;
		img{
			width: 86px;
			height: 81px;
			float: left;
			margin-top: 10px;
		}
		span{
			display: block;
			float: left;
			width: 12px;
			height: 12px;
			background: #0091e4;
			border-radius: 50%;
			margin-left: 37px;
			margin-top: 40px;
		}
		p{
			width: 510px;
			height: 60px;
			float: left;
			line-height: 30px;
			font-size: 22px;
			color: #000000;
			margin-top: 30px;
			margin-left: 8px;
		}
	}
</style>